<!DOCTYPE html>












  


<html class="theme-next pisces use-motion" lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"/>
<meta name="theme-color" content="#222">






  
  
    
      
    
    
      
    
  <script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
  <link href="https://cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />






















  

<link href="https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=6.3.0" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=6.3.0">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=6.3.0">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=6.3.0">


  <link rel="mask-icon" href="/images/logo.svg?v=6.3.0" color="#222">









<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '6.3.0',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: false,
    fastclick: false,
    lazyload: false,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>


  




  <meta name="description" content="vue较少关注的地方vue总体来说还是很简单的一个库，基本的一些需求能够很快地完成，但是有的需求用vue去实现，可能还是有点头疼，可能是因为一些api很少使用，所以这些地方也是需要查漏补缺，同时看看别的组件库是怎么封装组件的也能够学到很多东西。 查漏补缺 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根">
<meta name="keywords" content="vue">
<meta property="og:type" content="article">
<meta property="og:title" content="vue较少关注的地方">
<meta property="og:url" content="http://yoursite.com/2018/08/02/vue较少关注的地方/index.html">
<meta property="og:site_name" content="三月的米店">
<meta property="og:description" content="vue较少关注的地方vue总体来说还是很简单的一个库，基本的一些需求能够很快地完成，但是有的需求用vue去实现，可能还是有点头疼，可能是因为一些api很少使用，所以这些地方也是需要查漏补缺，同时看看别的组件库是怎么封装组件的也能够学到很多东西。 查漏补缺 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://yoursite.com/2018/08/02/vue较少关注的地方/3526.jpg">
<meta property="og:updated_time" content="2018-11-29T02:09:38.108Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="vue较少关注的地方">
<meta name="twitter:description" content="vue较少关注的地方vue总体来说还是很简单的一个库，基本的一些需求能够很快地完成，但是有的需求用vue去实现，可能还是有点头疼，可能是因为一些api很少使用，所以这些地方也是需要查漏补缺，同时看看别的组件库是怎么封装组件的也能够学到很多东西。 查漏补缺 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根">
<meta name="twitter:image" content="http://yoursite.com/2018/08/02/vue较少关注的地方/3526.jpg">






  <link rel="canonical" href="http://yoursite.com/2018/08/02/vue较少关注的地方/"/>



<script type="text/javascript" id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  <title>vue较少关注的地方 | 三月的米店</title>
  









  <noscript>
  <style type="text/css">
    .use-motion .motion-element,
    .use-motion .brand,
    .use-motion .menu-item,
    .sidebar-inner,
    .use-motion .post-block,
    .use-motion .pagination,
    .use-motion .comments,
    .use-motion .post-header,
    .use-motion .post-body,
    .use-motion .collection-title { opacity: initial; }

    .use-motion .logo,
    .use-motion .site-title,
    .use-motion .site-subtitle {
      opacity: initial;
      top: initial;
    }

    .use-motion {
      .logo-line-before i { left: initial; }
      .logo-line-after i { right: initial; }
    }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">三月的米店</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
      
        <h1 class="site-subtitle" itemprop="description">今儿不吃饭</h1>
      
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-home">
    <a href="/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-home"></i> <br />首页</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-tags">
    <a href="/tags/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />标签</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-categories">
    <a href="/categories/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-th"></i> <br />分类</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-archives">
    <a href="/archives/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />归档</a>
  </li>

      
      
    </ul>
  

  

  
</nav>



  



</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
            

          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/08/02/vue较少关注的地方/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Mark Lee">
      <meta itemprop="description" content="折腾小久的博客,在 2018-08-01 终于基本成型啦，以后就常驻啦">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="三月的米店">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">vue较少关注的地方
              
            
          </h2>
        

        <div class="post-meta">
          <span class="post-time">

            
            
            

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              

              
                
              

              <time title="创建时间：2018-08-02 09:24:33" itemprop="dateCreated datePublished" datetime="2018-08-02T09:24:33+08:00">2018-08-02</time>
            

            
              

              
                
                <span class="post-meta-divider">|</span>
                

                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                
                  <span class="post-meta-item-text">更新于</span>
                
                <time title="修改时间：2018-11-29 10:09:38" itemprop="dateModified" datetime="2018-11-29T10:09:38+08:00">2018-11-29</time>
              
            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="vue较少关注的地方"><a href="#vue较少关注的地方" class="headerlink" title="vue较少关注的地方"></a>vue较少关注的地方</h1><p><code>vue</code>总体来说还是很简单的一个库，基本的一些需求能够很快地完成，但是有的需求用<code>vue</code>去实现，可能还是有点头疼，可能是因为一些api很少使用，所以这些地方也是需要查漏补缺，同时看看别的组件库是怎么封装组件的也能够学到很多东西。</p>
<h2 id="查漏补缺"><a href="#查漏补缺" class="headerlink" title="查漏补缺"></a>查漏补缺</h2><blockquote>
<p>在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。<br>所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。</p>
</blockquote>
<h3 id="侦听器-amp-计算属性-amp-方法"><a href="#侦听器-amp-计算属性-amp-方法" class="headerlink" title="侦听器&amp;计算属性&amp;方法"></a>侦听器&amp;计算属性&amp;方法</h3><p>计算属性依赖于<code>data</code>、<code>props</code>或其他<code>computed</code>的变化而变化，具有缓冲，方法就没有缓冲。</p>
<p>侦听器的应用场景在<strong>数据变化时执行异步或开销较大的操作</strong>。</p>
<h3 id="v-if-amp-v-else可复用组件"><a href="#v-if-amp-v-else可复用组件" class="headerlink" title="v-if&amp;v-else可复用组件"></a>v-if&amp;v-else可复用组件</h3><p>来回切换的，<code>if</code>和<code>else</code>里面的一些共同的节点会存在复用的情况减少渲染开支，加入属性Key，避免复用。</p>
<p>这里<code>v-if</code>和<code>v-else</code>切换的时候可以用这种空的<code>template</code>来代替<code>div</code></p>
<p><strong><code>v-show</code>是不支持<code>template的</code></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;template v-<span class="keyword">if</span>=<span class="string">"loginType === 'username'"</span>&gt;</span><br><span class="line">  &lt;label&gt;Username&lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">  &lt;input placeholder="Enter your username"&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line">&lt;template v-<span class="keyword">else</span>&gt;</span><br><span class="line">  &lt;label&gt;Email&lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">  &lt;input placeholder="Enter your email address"&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br></pre></td></tr></table></figure>
<h3 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h3><blockquote>
<p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button v-on:click=<span class="string">"warn('Form cannot be submitted yet.', $event)"</span>&gt;</span><br><span class="line">  Submit</span><br><span class="line">&lt;<span class="regexp">/button&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h3><blockquote>
<p>当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>、<code>&lt;table&gt;</code>、<code>&lt;select&gt;</code> 这样的元素里允许包含的元素有限制，而另一些像 <code>&lt;option&gt;</code> 这样的元素只能出现在某些特定元素的内部。</p>
</blockquote>
<p><del>这个时候用上<code>is</code>，其他时候基本用不上。<code>.vue</code>没有影响，所以<code>is</code>基本没什么卵用。</del><br>这个<code>is</code>好像还是很有用的…，配合<code>conponent</code>组件好像能搞出大事情，后续文章这块会有再介绍用法。</p>
<h4 id="自定义事件的表单输入组件"><a href="#自定义事件的表单输入组件" class="headerlink" title="自定义事件的表单输入组件"></a>自定义事件的表单输入组件</h4><p>表单输入是业务中太常见的需求了，具体怎么搞，得深入理解下：</p>
<blockquote>
<p><code>v-model</code>是语法糖</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-model=<span class="string">"something"</span>&gt;</span><br></pre></td></tr></table></figure>
<p>是以下示例的语法糖：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;input</span><br><span class="line">  v-bind:value=<span class="string">"something"</span></span><br><span class="line">  v-on:input=<span class="string">"something = $event.target.value"</span>&gt;</span><br></pre></td></tr></table></figure>
<p>所以在组件中使用时，它相当于下面的简写：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;custom-input</span><br><span class="line">  v-bind:value=<span class="string">"something"</span></span><br><span class="line">  v-on:input=<span class="string">"something = arguments[0]"</span>&gt;</span><br><span class="line">&lt;<span class="regexp">/custom-input&gt;</span></span><br></pre></td></tr></table></figure>
<p>所以要让组件的 v-model 生效:</p>
<ul>
<li>接受一个<code>value</code>prop</li>
<li>在有新的值时候触发<code>input</code>事件并将新的值作为参数</li>
</ul>
<p>官网例子：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;currency-input v-model=<span class="string">"price"</span>&gt;&lt;/currency-input&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'currency-input'</span>, &#123;</span><br><span class="line">  template: <span class="string">'\</span></span><br><span class="line"><span class="string">    &lt;span&gt;\</span></span><br><span class="line"><span class="string">      $\</span></span><br><span class="line"><span class="string">      &lt;input\</span></span><br><span class="line"><span class="string">        ref="input"\</span></span><br><span class="line"><span class="string">        v-bind:value="value"\</span></span><br><span class="line"><span class="string">        v-on:input="updateValue($event.target.value)"\</span></span><br><span class="line"><span class="string">      &gt;\</span></span><br><span class="line"><span class="string">    &lt;/span&gt;\</span></span><br><span class="line"><span class="string">  '</span>,</span><br><span class="line">  props: [<span class="string">'value'</span>],</span><br><span class="line">  methods: &#123;</span><br><span class="line">    <span class="comment">// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制</span></span><br><span class="line">    updateValue: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">var</span> formattedValue = value</span><br><span class="line">        <span class="comment">// 删除两侧的空格符</span></span><br><span class="line">        .trim()</span><br><span class="line">        <span class="comment">// 保留 2 位小数</span></span><br><span class="line">        .slice(</span><br><span class="line">          <span class="number">0</span>,</span><br><span class="line">          value.indexOf(<span class="string">'.'</span>) === <span class="number">-1</span></span><br><span class="line">            ? value.length</span><br><span class="line">            : value.indexOf(<span class="string">'.'</span>) + <span class="number">3</span></span><br><span class="line">        )</span><br><span class="line">      <span class="comment">// 如果值尚不合规，则手动覆盖为合规的值</span></span><br><span class="line">      <span class="keyword">if</span> (formattedValue !== value) &#123;</span><br><span class="line">        <span class="keyword">this</span>.$refs.input.value = formattedValue</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过 input 事件带出数值</span></span><br><span class="line">      <span class="keyword">this</span>.$emit(<span class="string">'input'</span>, <span class="built_in">Number</span>(formattedValue))</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="非父子组件通信"><a href="#非父子组件通信" class="headerlink" title="非父子组件通信"></a>非父子组件通信</h4><p>官方给了一种比较奇怪的做法，实例化一个Vue实例，专门用来实现事件监听的空壳：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bus = <span class="keyword">new</span> Vue()</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">bus.$emit(<span class="string">`id-select`</span>,<span class="number">1</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">bus.$on(<span class="string">'id-selected'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">id</span>)</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
<p>这种方案，不清楚在<code>vue单文件</code>模式下如何使用。</p>
<h3 id="插槽slot"><a href="#插槽slot" class="headerlink" title="插槽slot"></a>插槽slot</h3><p>写这篇文章最主要的目的可能就是因为这个插槽，之前过了一遍文档，这块一带而过，没有深入理解，现在遇到需要实现<code>tooltip</code>等组件时，发现<code>element ui</code>在插槽在<a href="https://github.com/ElemeFE/element/tree/dev/packages/tooltip" target="_blank" rel="noopener">tooltip</a>这一块就是用的<code>slot</code>，所以还是很有必要回过头好好学一下这个东西。</p>
<p>先看官网定义，虽然官网这一块写的不是特别容易懂:</p>
<p>自定义组件内部再套一个组件或是一个普通dom节点是插槽解决的问题，<code>vue</code>中的叫法叫做<code>内容分发</code>，在<code>React</code>中好像直接用<code>this.props.children</code>就能搞定，<code>React</code>在某些地方确实很灵活也比较容易理解：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">app</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">app-header</span>&gt;</span><span class="tag">&lt;/<span class="name">app-header</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">app-footer</span>&gt;</span><span class="tag">&lt;/<span class="name">app-footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">app</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>编译作用域</li>
</ul>
<blockquote>
<p>父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。</p>
<ul>
<li>单个插槽</li>
</ul>
</blockquote>
<p>子组件至少包含一个<code>&lt;slot&gt;</code>插口，否则父组件的内容将会被<strong>丢弃</strong>。<br>当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 <code>DOM</code> 位置，并替换掉插槽标签本身。</p>
<p>例子也简单，贴一下吧：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//这是子组件my-component</span></span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;h2&gt;我是子组件的标题&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">  &lt;slot&gt;</span></span><br><span class="line"><span class="regexp">    只有在没有要分发的内容时才会显示。</span></span><br><span class="line"><span class="regexp">  &lt;/</span>slot&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件调用子组件</span></span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;h1&gt;我是父组件的标题&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">  &lt;my-component&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;这是一些初始内容&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;这是更多的初始内容&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/my</span>-component&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//结果</span></span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;h1&gt;我是父组件的标题&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">  &lt;div&gt;</span></span><br><span class="line"><span class="regexp">    &lt;h2&gt;我是子组件的标题&lt;/</span>h2&gt;</span><br><span class="line">    &lt;p&gt;这是一些初始内容&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;这是更多的初始内容&lt;/</span>p&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>具名插槽</li>
</ul>
<blockquote>
<p><code>&lt;slot&gt;</code> 元素可以用一个特殊的特性 <code>name</code> 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 <code>slot</code> 特性的元素。仍然可以有一个<code>匿名插槽</code>，它是<code>默认插槽</code>，作为找不到匹配的内容片段的备用插槽。如果没有<code>默认插槽</code>，这些找不到匹配的内容片段将被抛弃。</p>
</blockquote>
<p>继续看例子，也没有什么难度：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//一个布局组件app-layout</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"container"</span>&gt;</span><br><span class="line">  &lt;header&gt;</span><br><span class="line">    &lt;slot name=<span class="string">"header"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line">  &lt;<span class="regexp">/header&gt;</span></span><br><span class="line"><span class="regexp">  &lt;main&gt;</span></span><br><span class="line"><span class="regexp">    &lt;slot&gt;&lt;/</span>slot&gt;</span><br><span class="line">  &lt;<span class="regexp">/main&gt;</span></span><br><span class="line"><span class="regexp">  &lt;footer&gt;</span></span><br><span class="line"><span class="regexp">    &lt;slot name="footer"&gt;&lt;/</span>slot&gt;</span><br><span class="line">  &lt;<span class="regexp">/footer&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件去调用这个组件的时候</span></span><br><span class="line">&lt;app-layout&gt;</span><br><span class="line">  &lt;h1 slot=<span class="string">"header"</span>&gt;这里可能是一个页面标题&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">  &lt;p&gt;主要内容的一个段落。&lt;/</span>p&gt;</span><br><span class="line">  &lt;p&gt;另一个主要段落。&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">  &lt;p slot="footer"&gt;这里有一些联系信息&lt;/</span>p&gt;</span><br><span class="line">&lt;<span class="regexp">/app-layout&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//结果</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"container"</span>&gt;</span><br><span class="line">  &lt;header&gt;</span><br><span class="line">    &lt;h1&gt;这里可能是一个页面标题&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>header&gt;</span><br><span class="line">  &lt;main&gt;</span><br><span class="line">    &lt;p&gt;主要内容的一个段落。&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;另一个主要段落。&lt;/</span>p&gt;</span><br><span class="line">  &lt;<span class="regexp">/main&gt;</span></span><br><span class="line"><span class="regexp">  &lt;footer&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;这里有一些联系信息&lt;/</span>p&gt;</span><br><span class="line">  &lt;<span class="regexp">/footer&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>作用域插槽</li>
</ul>
<p><del>这里就是看不太懂的地方，先留一个坑。</del><br>看了一圈看的差不多明白了，放一个官网例子：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"child"</span>&gt;</span><br><span class="line">  &lt;slot text=<span class="string">"hello from child"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"parent"</span>&gt;</span><br><span class="line">  &lt;child&gt;</span><br><span class="line">    &lt;template slot-scope=<span class="string">"props"</span>&gt;</span><br><span class="line">      &lt;span&gt;hello <span class="keyword">from</span> parent&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">      &lt;span&gt;&#123;&#123; props.text &#125;&#125;&lt;/</span>span&gt;</span><br><span class="line">    &lt;<span class="regexp">/template&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>child&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//結果</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"parent"</span>&gt;</span><br><span class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"child"</span>&gt;</span><br><span class="line">    &lt;span&gt;hello <span class="keyword">from</span> parent&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">    &lt;span&gt;hello from child&lt;/</span>span&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>
<p>什么意思呢，子组件的内容可以传递到父组件上去给父组件用，例子中在自组建的<code>slot</code>上挂了一个<code>text</code>属性，然后父组件在<code>template</code>上声明一个<code>slot-scope</code>属性，通过这个属性的值就可以访问到自组件想要给父组件的值，有点绕，看起来很灵活很有用，但是实际应用场景应该不多。</p>
<ul>
<li>动态组件</li>
</ul>
<blockquote>
<p>通过使用保留的 <code>&lt;component&gt;</code> 元素，并对其 <code>is</code> 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：</p>
</blockquote>
<p>感觉简单的一个可切换card页面可以用这种方法解决：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#example'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    currentView: <span class="string">'home'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    home: &#123; <span class="comment">/* ... */</span> &#125;,</span><br><span class="line">    posts: &#123; <span class="comment">/* ... */</span> &#125;,</span><br><span class="line">    archive: &#123; <span class="comment">/* ... */</span> &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;component v-bind:is=<span class="string">"currentView"</span>&gt;</span><br><span class="line">  &lt;!-- 组件在 vm.currentview 变化时改变！ --&gt;</span><br><span class="line">&lt;<span class="regexp">/component&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Home = &#123;</span><br><span class="line">  template: <span class="string">'&lt;p&gt;Welcome home!&lt;/p&gt;'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#example'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    currentView: Home</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>keep-alive</li>
</ul>
<p>这种专门针对切换可以缓冲组件。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive&gt;</span><br><span class="line">  &lt;component :is=<span class="string">"currentView"</span>&gt;</span><br><span class="line">    &lt;!-- 非活动组件将被缓存！ --&gt;</span><br><span class="line">  &lt;<span class="regexp">/component&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>keep-alive&gt;</span><br></pre></td></tr></table></figure>
<h3 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h3><blockquote>
<p>有的情况下，你仍然需要对<strong>普通 <code>DOM</code> 元素</strong>进行底层操作，这时候就会用到自定义指令</p>
</blockquote>
<p>官网的这个例子很好,组件在加载完自动focus：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册一个全局自定义指令 `v-focus`</span></span><br><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">  <span class="comment">// 当被绑定的元素插入到 DOM 中时……</span></span><br><span class="line">  inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 聚焦元素</span></span><br><span class="line">    el.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//调用</span></span><br><span class="line">  &lt;input v-focus&gt;</span><br></pre></td></tr></table></figure>
<p>几个钩子函数：</p>
<ol>
<li>bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</li>
<li>inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</li>
<li>update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。</li>
<li>componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。</li>
<li>unbind 只调用一次，指令与元素解绑时调用。</li>
</ol>
<p>钩子函数的参数：</p>
<ul>
<li>el  指令所绑定的元素，可以用来直接操作 DOM</li>
<li>binding<ul>
<li>name 指令名，不包括 <code>v-</code> 前缀。</li>
<li>value 指令的绑定值</li>
<li>oldValue 指令绑定的前一个值，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。无论值是否改变都可用。</li>
<li>expression 字符串形式的指令表达式。</li>
<li>arg 传给指令的参数，可选。</li>
<li>modifiers 一个包含修饰符的对象。</li>
</ul>
</li>
<li>vnode Vue 编译生成的虚拟节点。</li>
<li>oldVnode 上一个虚拟节点，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。</li>
</ul>
<p>比较重要的也就<code>el</code>和<code>binding</code>，用<code>binding</code>里的<code>value</code>可以给<code>el</code>用。</p>
<blockquote>
<p>除了 <code>el</code> 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 <code>dataset</code> 来进行。</p>
</blockquote>
<hr>
<h2 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h2><p>2018/4/6：</p>
<p>最近看了一些别人组件一些用法，感觉学的<code>vue</code>还是比较皮毛的，有空再写一篇<code>vue</code>的较为高级用法。先留一个坑<a href="https://github.com/limengke123/my-note/blob/master/%E5%89%8D%E7%AB%AF/vue%E8%BE%83%E5%B0%91%E5%85%B3%E6%B3%A8%E7%9A%84%E5%9C%B0%E6%96%B9.md" target="_blank" rel="noopener">《细看vue组件》</a></p>
<hr>
<p>参考资料：</p>
<ol>
<li><p><a href="https://github.com/ElemeFE/element" target="_blank" rel="noopener">element UI</a></p>
</li>
<li><p><a href="https://github.com/youzan/vant" target="_blank" rel="noopener">vant</a></p>
</li>
<li><p><a href="https://nlush.com/blog/2017/10/14/VUE-%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%80%E7%82%B9%E6%80%9D%E8%80%83/" target="_blank" rel="noopener">vue组件思考</a></p>
</li>
</ol>
<p>我的相关项目：</p>
<ul>
<li><p><a href="https://github.com/limengke123/fantastic-carnival" target="_blank" rel="noopener">fantastic-carnival</a> 一个前后端都有的博客</p>
</li>
<li><p><a href="https://github.com/limengke123/md-editor" target="_blank" rel="noopener">md-editor</a> markdown的编辑器</p>
</li>
</ul>
<hr>
<p><img src="/2018/08/02/vue较少关注的地方/3526.jpg" alt="Johannes Vermeer – Girl with a Pearl Earring"></p>
<blockquote>
<p>Johannes Vermeer – Girl with a Pearl Earring 1665-67</p>
</blockquote>

      
    </div>

    

    
    
    

    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/vue/" rel="tag"><i class="fa fa-tag"></i> vue</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/08/02/绕不开的promise/" rel="next" title="绕不开的promise">
                <i class="fa fa-chevron-left"></i> 绕不开的promise
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/08/03/vue与react组件对比学习/" rel="prev" title="vue与react组件对比学习">
                vue与react组件对比学习 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>


  </div>


          </div>
          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">Mark Lee</p>
              <p class="site-description motion-element" itemprop="description">折腾小久的博客,在 2018-08-01 终于基本成型啦，以后就常驻啦</p>
          </div>

          
            <nav class="site-state motion-element">
              
                <div class="site-state-item site-state-posts">
                
                  <a href="/archives/">
                
                    <span class="site-state-item-count">26</span>
                    <span class="site-state-item-name">日志</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-categories">
                  <a href="/categories/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">4</span>
                    <span class="site-state-item-name">分类</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-tags">
                  <a href="/tags/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">20</span>
                    <span class="site-state-item-name">标签</span>
                  </a>
                </div>
              
            </nav>
          

          

          

          
          

          
          

          
            
          
          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#vue较少关注的地方"><span class="nav-number">1.</span> <span class="nav-text">vue较少关注的地方</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#查漏补缺"><span class="nav-number">1.1.</span> <span class="nav-text">查漏补缺</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#侦听器-amp-计算属性-amp-方法"><span class="nav-number">1.1.1.</span> <span class="nav-text">侦听器&amp;计算属性&amp;方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#v-if-amp-v-else可复用组件"><span class="nav-number">1.1.2.</span> <span class="nav-text">v-if&amp;v-else可复用组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件处理"><span class="nav-number">1.1.3.</span> <span class="nav-text">事件处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组件"><span class="nav-number">1.1.4.</span> <span class="nav-text">组件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#自定义事件的表单输入组件"><span class="nav-number">1.1.4.1.</span> <span class="nav-text">自定义事件的表单输入组件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#非父子组件通信"><span class="nav-number">1.1.4.2.</span> <span class="nav-text">非父子组件通信</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#插槽slot"><span class="nav-number">1.1.5.</span> <span class="nav-text">插槽slot</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令"><span class="nav-number">1.1.6.</span> <span class="nav-text">自定义指令</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#补充"><span class="nav-number">1.2.</span> <span class="nav-text">补充</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Mark Lee</span>

  

  
</div>


  


<!--

  <div class="powered-by">由 <a class="theme-link" target="_blank" rel="external nofollow" href="https://hexo.io">Hexo</a> 强力驱动 v3.7.1</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" rel="external nofollow" href="https://theme-next.org">NexT.Pisces</a> v6.3.0</div>

-->



        








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    
	
    

    
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>


























  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=6.3.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=6.3.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=6.3.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=6.3.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=6.3.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=6.3.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=6.3.0"></script>



  



  










  





  

  

  

  

  
  

  

  

  

  

  

</body>
</html>
